<template>
  <div class="modules" v-loading="modules.loading" element-loading-background="rgba(0, 0, 0, 0.7)">
    <div
      class="modules-item"
      v-for="item in modules.lists"
      :key="item.id"
      @click="modules.active = modules.active === item.id ? '' : item.id"
    >
      <div class="modules-item-info">
        <p class="modules-item-info-title">
          <span>大屏名称：</span>
          <span :title="item.name">{{ item.name }}</span>
        </p>
        <p class="modules-item-info-update">
          <span>最近修改时间：</span>
          <span :title="item.lastModifiedDate">{{ item.lastModifiedDate }}</span>
        </p>
      </div>
      <div :class="{ 'modules-item-preview':true, 'modules-item-preview-active':modules.active === item.id }">
        <img class="modules-item-preview-img" :src="item.imageUrl">
        <div class="modules-status" v-if="item.status === 1">
          启用中
        </div>
      </div>
      <div class="modules-item-tools">
        <el-button-group v-show="modules.active === item.id" size="small">
          <el-button
            type="primary"
            v-permission="['config:edit']"
            v-if="item.status !== 1"
            @click="editStatus(item, 1)"
          >
            启用
          </el-button>
          <el-button type="info" @click="handelDel(item)" v-permission="['config:del']">
            删除
          </el-button>
          <el-button type="info" @click="emit('edit', item)" v-permission="['config:edit']">
            修改
          </el-button>
        </el-button-group>
      </div>
    </div>
    <div class="modules-item module-add" v-permission="['config:edit']">
      <div class="modules-item-info" />
      <div class="modules-item-preview" @click="emit('added')">
        <el-icon :size="120" color="#8291A9">
          <CirclePlus />
        </el-icon>
      </div>
      <div class="modules-item-tools" />
    </div>
  </div>
  <div class="pages">
    <el-pagination
      background
      layout="total, prev, pager, next"
      :total="page.totalElements"
      :page-size="page.size"
      :current-page="page.page"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @update:page-size="handleSizeChange"
      @update:current-page="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { getConfigList, delConfig, editConfig } from '@/api/system'
import { ElMessage, ElMessageBox } from 'element-plus'

const emit = defineEmits(['added', 'edit'])
// 模板对象
const modules = reactive({
  active: '',
  loading: false,
  lists: [] as any[]
})

const page = reactive({
  page: 1,
  size: 5,
  totalElements: 5
})
const handleSizeChange = (size: number) => {
  page.page = 1
  page.size = size
  fetchData()
}
const handleCurrentChange = (val: number) => {
  page.page = val
  fetchData()
}

// 启用&禁用
const editStatus = async (item: any, status: number) => {
  await editConfig({ id: item.id, status })
  ElMessage.success('启用成功')
  fetchData()
}

// 删除
const handelDel = async (item: any) => {
  await ElMessageBox({
    title: '提示',
    message: `确认删除${item.name}配置数据`,
    type: 'warning',
    showCancelButton: true,
    cancelButtonText: '取消',
    confirmButtonText: '确认',
    center: true
  })
  await delConfig(item.id)
  ElMessage.success('删除成功')
  fetchData()
}

// 加载数据
const fetchData = async () => {
  modules.loading = true
  const data = await getConfigList({
    page: page.page - 1,
    size: page.size
  })
  if (data.content) {
    page.totalElements = data.totalElements
    modules.lists = data.content
  }
  modules.loading = false
}
fetchData()
</script>
<script lang="ts">
export default {
  name: 'List'
}
</script>
<style lang="scss" scoped>
  // 模板grid
.modules {
  flex: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: $space-margin;
  box-sizing: border-box;

  .modules-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    .modules-item-info {
      width: 100%;
      flex: 0 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 5px;
      background-color: rgba(0, 0, 0, 0.5);
      box-sizing: border-box;
      padding: 0 10px;
      margin-bottom: 10px;

      .modules-item-info-title,
      .modules-item-info-update {
        font-family: SourceHanSansCN-Medium;
        font-size: 12px;
        font-weight: 500;
        line-height: 24px;
        color: #8291A9;
        width: 45%;
        display: flex;
        > span:last-child {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .modules-item-preview {
      width: 100%;
      flex: 1;
      border-radius: 6px;
      background: #000000;
      box-sizing: border-box;
      border: 3px solid rgba(0, 255, 255, .3);
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .modules-item-preview-img {
        width: 100%;
        height: 100%;
        user-select: none;
        -webkit-user-drag: none;
      }
      .modules-status {
        position: absolute;
        top: 5px;
        right: 5px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: bold;
        line-height: 30px;
        background-color: #FF8A48;
        color: #fff;
        border-radius: 6px;
      }
    }
    .modules-item-preview-active {
      border-color: rgba(0, 255, 255, .9) !important;
    }
    .modules-item-tools {
      flex: 0 0 24px;
      margin: 10px 0;
    }
  }

  .module-add {
    justify-content: flex-end;

    .modules-item-info {
      background-color: transparent;
    }
    .modules-item-preview {
      flex: 1;
      cursor: pointer;
      .circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 5px solid #8291A9;

        span {
          color: #8291A9;
          font-size: 80px;
          transform: translateY(-7px);
        }
      }
    }
  }
}
.pages {
  display: flex;
  justify-content: center;
  align-items: center;
  &:deep(.el-pagination) {
    .el-pager {
      .is-active {
        background-color: #0081FF !important;
      }
      .number,
      .more {
        color:#fff;
        background-color: #1F2935;
        margin: 0;
        padding: 10px;
      }
    }
    .btn-prev,
    .btn-next {
      color:#fff;
      background-color: #1F2935;
      padding: 10px;
    }
    .btn-prev {
      margin-right: 0;
    }
    .btn-next {
      margin-left: 0;
    }
  }
}
</style>
